<template>
  <div class="op-group" @click.stop>
    <div class="op-title">
      <span>标签设置</span>
      <span class="close-icon" @click="close">
        <a-icon-font type="iconicon-beifen1" />
      </span>
    </div>
    <div class="content">
      <a-select
        v-model="textFont"
        :style="{ width: '100%' }"
        :get-popup-container="(triggerNode) => triggerNode.parentNode"
        size="small"
      >
        <a-select-option
          v-for="item in textFontOptions"
          :key="item.value"
          :value="item.value"
        >
          {{ item.name }}
        </a-select-option>
      </a-select>
      <div class="font-size-setting">
        <a-select
          v-model="textSize"
          :style="{ width: '100%' }"
          :get-popup-container="(triggerNode) => triggerNode.parentNode"
          size="small"
        >
          <a-select-option
            v-for="size in textSizeOptions"
            :key="size"
            :value="size"
          >
            {{ size }}px
          </a-select-option>
        </a-select>
      </div>
      <div class="font-color-title">字体颜色</div>
      <div class="font-color-setting">
        <div class="font-colors">
          <span
            v-for="(color, index) in textColorOptions"
            :key="index"
            class="color-item-border"
            :class="{ selected: textColor === color }"
            :style="{ background: color, 'border-color': borderColor(color) }"
            @click="setColor(color)"
          ></span>
        </div>
        <div class="font-opacity">
          <a-slider
            v-model="textOpacity"
            :style="{ width: '55%' }"
            size="small"
          />
          <a-input-number
            v-model="textOpacity"
            :style="{ width: '25%' }"
            size="small"
          />
          %
        </div>
      </div>
    </div>
    <div class="button-row">
      <a-button class="op-btn-sub" size="small" @click="close">取消</a-button>
      <a-button
        class="op-btn-sub"
        type="primary"
        size="small"
        @click="doOption"
      >
        确定
      </a-button>
    </div>
  </div>
</template>

<script lang="ts">
/**
 * gis 要素标记 <标签> 的配置气泡框
 * @author Hou Jinhui
 */
import { Component, Vue } from 'vue-property-decorator'
import { borderColor } from '@/components/gis/layer-tags/attribute-tag/tags'
import { getDarkColor } from '@/util/color'

@Component({
  components: {},
})
export default class TagLabel extends Vue {
  public textFont: string = 'Open Sans Regular,Arial Unicode MS Regular'
  public textFontOptions: any = [
    { name: '默认', value: 'Open Sans Regular,Arial Unicode MS Regular' },
  ]
  public textSize: number = 10 // select font size
  public textSizeOptions: any = [
    8, 9, 10, 11, 12, 13, 14, 16, 18, 20, 22, 24, 26, 28, 36, 48, 72,
  ]
  public textColor: string = '#A4ABFB' // select current color
  public textColorOptions: string[] = borderColor
  public textOpacity: number = 100 // border 透明度

  private setColor(color: string) {
    this.textColor = color
  }

  private borderColor(color: string) {
    return getDarkColor(color, 0.3)
  }

  public close() {
    this.$emit('cancel')
  }

  public doOption() {
    const { textSize, textColor, textOpacity } = this
    const config: any = {
      paint: {
        'text-color': textColor,
        'text-opacity': textOpacity / 100,
      },
      layout: {
        'text-font': ['Open Sans Regular,Arial Unicode MS Regular'],
        'text-size': textSize,
      },
    }
    this.$emit('confirm', config)
  }
}
</script>

<style lang="less" scoped>
.op-title {
  align-items: center;
  border-bottom: 1px solid #e9e9e9;
  color: #5d637e;
  display: flex;
  font-size: 14px;
  font-weight: 500;
  height: 36px;
  justify-content: space-between;
  letter-spacing: 1px;
  line-height: 20px;
  padding: 0 12px;

  .close-icon {
    cursor: pointer;
  }
}

.content {
  padding: 12px;

  .font-size-setting {
    margin-top: 12px;
  }

  .font-color-title {
    margin-top: 12px;
  }

  .font-color-setting {
    background: #fafafc;

    .font-colors {
      align-items: center;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

      .color-item-border {
        border-radius: 50%;
        cursor: pointer;
        display: inline-block;
        height: 19px;
        margin: 4px;
        width: 19px;

        &:hover {
          border-style: solid;
          border-width: 2px;
        }
      }

      .selected {
        border-style: solid;
        border-width: 2px;
      }
    }

    .font-opacity {
      align-items: center;
      display: flex;
      justify-content: space-between;
      width: 100%;
    }
  }
}

// 尾部按钮
.button-row {
  margin-bottom: 12px;
  padding: 0 12px;
  text-align: right;
  width: 100%;

  .op-btn-sub {
    margin-left: 10px;
  }
}
</style>
